<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	template="../templates/ui.xhtml">
    
        
    <ui:define name="head">
        <style type="text/css">
            .ui-multiselectlistbox-listcontainer {
                height: 75px;
            }
        </style>
    </ui:define>
    
	<ui:define name="content">

		<h1 class="title ui-widget-header ui-corner-all">MultiSelectListbox</h1>
		<div class="entry">
			<p>MultiSelectListbox is used to select an item from a collection of listboxes that are in parent-child relationship.</p>

			<h:form>

                <p:multiSelectListbox value="#{multiSelectListboxBean.selection}" effect="slide">
                    <f:selectItems value="#{multiSelectListboxBean.categories}" />
                </p:multiSelectListbox>

                <p:commandButton value="Save" icon="ui-icon-check" update="out" style="margin:10px 0"/>
 
                <h:outputText id="out" value="Value: #{multiSelectListboxBean.selection}" style="display:block"/>

			</h:form>

            <h3>Source</h3>
			<p:tabView>
				<p:tab title="multiSelectListbox.xhtml">
<pre name="code" class="xml">
&lt;h:form&gt;

    &lt;p:multiSelectListbox value="\#{multiSelectListboxBean.selection}" effect="slide"&gt;
        &lt;f:selectItems value="\#{multiSelectListboxBean.categories}" /&gt;
    &lt;/p:multiSelectListbox&gt;

    &lt;p:commandButton value="Save" icon="ui-icon-check" update="out" style="margin:10px 0"/&gt;

    &lt;h:outputText id="out" value="Value: \#{multiSelectListboxBean.selection}" style="display:block"/&gt;

&lt;/h:form&gt;
</pre>
				</p:tab>
				
				<p:tab title="MultiSelectListboxBean.java">
<pre name="code" class="java">
package org.primefaces.examples.view;

import java.util.ArrayList;
import java.util.List;
import javax.annotation.PostConstruct;
import javax.faces.model.SelectItem;
import javax.faces.model.SelectItemGroup;

public class MultiSelectListboxBean {
    
    private List&lt;SelectItem&gt; categories;
    
    private String selection;

    @PostConstruct
    public void init() {
        categories = new ArrayList&lt;SelectItem&gt;();
        SelectItemGroup group1 = new SelectItemGroup("Group 1");
        SelectItemGroup group2 = new SelectItemGroup("Group 2");
        SelectItemGroup group3 = new SelectItemGroup("Group 3");
        SelectItemGroup group4 = new SelectItemGroup("Group 4");
        
        SelectItemGroup group11 = new SelectItemGroup("Group 1.1");
        SelectItemGroup group12 = new SelectItemGroup("Group 1.2");
        
        SelectItemGroup group21 = new SelectItemGroup("Group 2.1");
        
        SelectItem option31 = new SelectItem("Option 3.1", "Option 3.1");
        SelectItem option32 = new SelectItem("Option 3.2", "Option 3.2");
        SelectItem option33 = new SelectItem("Option 3.3", "Option 3.3");
        SelectItem option34 = new SelectItem("Option 3.4", "Option 3.4");
        
        SelectItem option41 = new SelectItem("Option 4.1", "Option 4.1");
        
        SelectItem option111 = new SelectItem("Option 1.1.1");
        SelectItem option112 = new SelectItem("Option 1.1.2");
        group11.setSelectItems(new SelectItem[]{option111, option112});
        
        SelectItem option121 = new SelectItem("Option 1.2.1", "Option 1.2.1");
        SelectItem option122 = new SelectItem("Option 1.2.2", "Option 1.2.2");
        SelectItem option123 = new SelectItem("Option 1.2.3", "Option 1.2.3");
        group12.setSelectItems(new SelectItem[]{option121, option122, option123});
        
        SelectItem option211 = new SelectItem("Option 2.1.1", "Option 2.1.1");
        group21.setSelectItems(new SelectItem[]{option211});
        
        group1.setSelectItems(new SelectItem[]{group11, group12});
        group2.setSelectItems(new SelectItem[]{group21});
        group3.setSelectItems(new SelectItem[]{option31, option32, option33, option34});
        group4.setSelectItems(new SelectItem[]{option41});
        
        categories.add(group1);
        categories.add(group2);
        categories.add(group3);
        categories.add(group4);
    }
    
    public List&lt;SelectItem&gt; getCategories() {
        return categories;
    }    

    public String getSelection() {
        return selection;
    }
    public void setSelection(String selection) {
        this.selection = selection;
    }
}

</pre>
				</p:tab>
			</p:tabView>
            
		</div>

	</ui:define>
</ui:composition>